import QueryFilter from "@/components/QueryFilter"
import useAntdList from "@/hooks/useAntdList"
import useAntdModal from "@/hooks/useAntdModal";
import { destroyResource, queryResource } from "@/service/deliver";
import { Button, Card,Image, Form, message, Table, Upload, Space } from "antd"
import { ColumnsType } from "antd/lib/table";
import CopyToClipboard from "react-copy-to-clipboard";
import SaveResourceModal from "./components/SaveResourceModal";

const App = () => {
  const [form] = Form.useForm();
  const saveResourceModal = useAntdModal();
  const { tableProps, refresh, search } = useAntdList(queryResource, { form })
  const columns: ColumnsType<any> = [{
    title: '文件',
    // dataIndex: 'path'
    render(_){
     if(['.png','.jpeg','.gif'].find(v=> _.path.endsWith(v))){

       return <Image width={80} height={80} src={`https://static.weillan.com/www/resource/${_.path}`}/>
     }
     return _.path
    }
  }, {
    title: '标题',
    dataIndex: 'title'
  }, {
    title: '类型',
    dataIndex: 'type'
  }, {
    title: 'MD5',
    dataIndex: 'md5'
  }, {
    title: '上传时间',
    dataIndex: 'createdAt'
  }, {
    title: '更新时间',
    dataIndex: 'updatedAt'
  }, {
    title: '上传人',
    dataIndex: 'createdBy'
  }, {
    title: '备注',
    dataIndex: 'remark'
  }, {
    title: '操作',
    render(_) {
      return <Space>
        <Button danger type='link' onClick={()=>{
          destroyResource({..._})
        }}>删除</Button>
         <CopyToClipboard 
        onCopy={()=>{
            message.success('复制成功')
        }}
        text={`https://static.weillan.com/www/resource/${_.path}`}>

        <Button type='link'>复制链接</Button>
        </CopyToClipboard>
        
      </Space>
    }
  }
  ]
  return <Card>
    <SaveResourceModal {...saveResourceModal}/>
    <QueryFilter form={form} items={[{
      label:'标题',
      name:'title'
    },{
      label:'类型',
      name:'type'
    }]} {...search} />
    {/* <Upload
      method="POST"
      action={action}
    ><Button>上传</Button></Upload> */}
    <Button onClick={()=>saveResourceModal.openModal()}>
    上传
    </Button>
    <Table size='small' rowKey='id'  columns={columns} {...tableProps} />
  </Card>
}
export default App